<template>
    <div class="ztsx-liu">
        <!-- 文章标题 -->
        <div class="ztsx-title">
            <span class="ztsx-span">文章标题：</span>
            <a-select
                :style="{
                    width: '320px',
                    marginLeft: '25px',
                    height: '25px',
                    border: '1.5px solid darkgray',
                }"
                placeholder="2023年世界人工智能大会"
            >
                <a-option>2023年世界人工智能大会</a-option>
            </a-select>
        </div>
        <!-- 文章分区 -->
        <div class="ztsx-partition">
            <span class="ztsx-span">文章分区：</span>
            <a-select
                :style="{
                    width: '130px',
                    marginLeft: '25px',
                    border: '1.5px solid darkgray',
                    height: '20px',
                    paddingRight: '7px',
                    paddingLeft: '0px',
                }"
                placeholder="振涛实讯"
            >
                <a-option>振涛实讯</a-option>
            </a-select>
        </div>
        <!-- 文章内容 -->
        <div class="ztsx-content">
            <span class="ztsx-span">文章内容：</span>
            <a-textarea
                placeholder="以行业要求为标准，以产教融合的模式为核心，通过教育思想的革命，教育内容的精进以及教育方法的创新，培养思维模式先进、通识知识宽广、专业知识深厚以及应用能力熟练的一流人才"
                :style="{
                    width: '85%',
                    marginLeft: '25px',
                    height: '100%',
                }"
            />
        </div>
        <!-- 文章图片 -->
        <div class="ztsx-Image">
            <span class="ztsx-span">文章图片：</span>
            <div class="image-div">
                <div class="image-div-left">
                    <a-upload
                        list-type="picture-card"
                        action="/"
                        :default-file-list="fileList"
                        image-preview
                    />
                </div>
                <div class="image-div-right">
                    <div class="right-button">
                        <button>从图库选择</button>
                        <button>本地上传</button>
                    </div>
                    <span class="right-span">
                        图片格式为PNG、JPG，最大不超过5M
                    </span>
                </div>
            </div>
        </div>
        <!-- 列表图片 -->
        <div class="ztsx-Image">
            <span class="ztsx-span">列表图片：</span>
            <div class="image-div">
                <div class="image-div-left">
                    <a-upload
                        list-type="picture-card"
                        action="/"
                        :default-file-list="fileList"
                        image-preview
                    />
                </div>
                <div class="image-div-right">
                    <div class="right-button">
                        <button>从图库选择</button>
                        <button>本地上传</button>
                    </div>
                    <span class="right-span">
                        图片格式为PNG、JPG，最大不超过5M
                    </span>
                </div>
            </div>
        </div>
        <!-- 文章关键词 -->
        <div class="ztsx-keyword">
            <span class="ztsx-span">文章关键词：</span>
            <a-input
                :style="{ width: '260px', height: '50px', marginLeft: '12px' }"
                placeholder="添加关键词"
                allow-clear
            />
            <button class="keyword-button">从正文提取</button>
        </div>
        <!-- 文章状态 -->
        <div class="ztsx-state">
            <span class="ztsx-span">文章状态：</span>
            <a-radio-group v-model="value1" :options="plainOptions" />
        </div>
        <!-- 按钮 -->
        <div class="ztsx-button">
            <a-button
                type="primary"
                :style="{
                    background: 'white',
                    color: 'darkgray',
                    border: '1px solid darkgray',
                }"
            >
                取消
            </a-button>
            <a-button type="primary">修改</a-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

let fileList = reactive([])
let value1 = ref('显示')
const plainOptions = ['显示', '隐藏']
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.ztsx-liu {
    width: 100%;
    height: 100%;
}
.ztsx-title {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
}
.ztsx-span {
    margin-left: 15px;
    color: black;
    font-weight: 400;
    font-size: 14px;
}
.ztsx-partition {
    width: 100%;
    height: 5%;
    display: flex;
    align-items: center;
}
.arco-select-view-suffix {
    padding-left: 10px;
}
.ztsx-content {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: flex-start;
    margin-top: 2%;
}
.ztsx-Image {
    width: 100%;
    height: 15%;
    display: flex;
    align-items: flex-start;
    margin-top: 2%;
}
.image-div {
    width: 80%;
    height: 100%;
    margin-left: 25px;
    display: flex;
}
.image-div-left {
    width: 15%;
    height: 100%;
}
.image-div-right {
    width: 80%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}
.right-button {
    width: 100%;
}
.right-button > button {
    width: 130px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    margin-right: 15px;
    background-color: white;
    border: 1.5px solid darkgray;
}
.right-span {
    font-size: 12px;
    margin-top: 10px;
}
.ztsx-keyword {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
}
.keyword-button {
    width: 130px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    margin-left: 15px;
    background-color: white;
    border: 1.5px solid darkgray;
}
.ztsx-state {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
}
.arco-radio-group {
    margin-left: 15px;
}
.ztsx-button {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arco-btn-primary {
    width: 80px;
    margin-right: 15px;
}
</style>
